<template>
  <div class="knowledge-page">
    <a-card class="knowledge-card" :bordered="false">
      <template #title>
        <span style="font-size:1.3rem;font-weight:600;color:#1890ff;">
          <i class="anticon anticon-book" style="margin-right:8px;"></i>投资金融知识科普
        </span>
      </template>
      <div class="category-bar">
        <a-radio-group v-model:value="activeCategory" button-style="solid">
          <a-radio-button v-for="cat in categories" :key="cat" :value="cat">{{ cat }}</a-radio-button>
        </a-radio-group>
      </div>
      <a-row gutter="24">
        <a-col :xs="24" :sm="12" :md="12" :lg="8" v-for="item in filteredList" :key="item.title">
          <a-card
            hoverable
            class="item-card knowledge-item"
            @click="showDetail(item)"
            :body-style="{padding:'18px 24px'}"
          >
            <div class="item-header">
              <i class="anticon anticon-bulb item-icon"></i>
              <span class="item-title">{{ item.title }}</span>
            </div>
            <div class="item-summary">{{ item.summary }}</div>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Modal } from 'ant-design-vue'

const categories = [
  '全部',
  '基础概念',
  '投资策略',
  '风险管理',
  '市场分析',
  '理财规划'
]
const activeCategory = ref('全部')

const knowledgeList = ref([
  // 基础概念
  {
    title: '什么是股票？',
    summary: '股票是公司所有权的一部分，持有股票即为公司股东。',
    detail: '股票代表公司所有权的一部分，持有股票即拥有公司股份，有权参与公司分红和决策。股票价格受公司经营、市场供需等多种因素影响。',
    category: '基础概念'
  },
  {
    title: '什么是基金？',
    summary: '基金是由专业机构管理、投资于多种资产的理财产品。',
    detail: '基金由基金公司或管理人募集资金，投资于股票、债券等多种资产，适合希望分散风险、专业理财的投资者。',
    category: '基础概念'
  },
  {
    title: '什么是债券？',
    summary: '债券是政府或企业发行的有息借款凭证。',
    detail: '债券是政府、企业等主体为筹集资金而发行的有息借款凭证，投资者购买债券可获得固定利息和本金偿还。',
    category: '基础概念'
  },
  {
    title: '什么是指数？',
    summary: '指数反映一组股票或资产的整体价格变动。',
    detail: '指数是用来衡量一组股票或资产整体价格变动的指标，如上证指数、标普500等。',
    category: '基础概念'
  },
  // 投资策略
  {
    title: '分散投资的重要性',
    summary: '分散投资可降低风险，避免“把鸡蛋放在同一个篮子里”。',
    detail: '通过投资多种资产或行业，可以有效降低单一资产波动带来的风险，提高整体投资的稳定性。',
    category: '投资策略'
  },
  {
    title: '长期投资的优势',
    summary: '长期持有优质资产有助于平滑市场波动，实现财富增长。',
    detail: '长期投资可以减少短期市场波动的影响，享受复利增长和优质企业成长带来的收益。',
    category: '投资策略'
  },
  {
    title: '价值投资与成长投资',
    summary: '价值投资关注低估资产，成长投资关注高成长企业。',
    detail: '价值投资者倾向于买入被低估的优质资产，成长投资者则关注业绩快速增长的企业。',
    category: '投资策略'
  },
  {
    title: '定投策略',
    summary: '定期定额投资可平滑成本，适合长期积累。',
    detail: '定投是指定期定额买入某类资产，能有效分散市场波动风险，适合长期理财目标。',
    category: '投资策略'
  },
  // 风险管理
  {
    title: '风险与收益的关系',
    summary: '高收益往往伴随高风险，投资需根据自身风险承受能力选择产品。',
    detail: '投资产品的预期收益越高，通常风险也越大。投资者应根据自身风险偏好和财务状况合理配置资产。',
    category: '风险管理'
  },
  {
    title: '止损与止盈',
    summary: '止损止盈可帮助投资者控制风险和锁定收益。',
    detail: '止损是在亏损达到预设比例时及时卖出，止盈则是在盈利达到目标时卖出，均有助于控制投资风险。',
    category: '风险管理'
  },
  {
    title: '资产配置',
    summary: '合理配置不同资产类别可降低整体风险。',
    detail: '资产配置是根据投资目标和风险偏好，将资金分配到股票、债券、现金等不同类别，实现风险与收益平衡。',
    category: '风险管理'
  },
  // 市场分析
  {
    title: '技术分析与基本面分析',
    summary: '技术分析关注价格走势，基本面分析关注企业价值。',
    detail: '技术分析通过研究价格和成交量等数据预测市场走势，基本面分析则关注企业财务、行业前景等因素。',
    category: '市场分析'
  },
  {
    title: '宏观经济与投资',
    summary: '宏观经济环境影响市场表现和投资决策。',
    detail: '经济增长、利率、通胀等宏观因素会影响市场整体表现，投资者需关注相关数据和政策变化。',
    category: '市场分析'
  },
  {
    title: '牛市与熊市',
    summary: '牛市指市场上涨，熊市指市场下跌。',
    detail: '牛市是指市场整体呈现上涨趋势，熊市则是整体下跌，投资策略需根据市场周期调整。',
    category: '市场分析'
  },
  // 理财规划
  {
    title: '理财目标设定',
    summary: '明确理财目标有助于科学规划投资方案。',
    detail: '理财目标包括购房、教育、养老等，明确目标后可制定合理的投资计划。',
    category: '理财规划'
  },
  {
    title: '复利的力量',
    summary: '复利可让财富实现指数级增长。',
    detail: '复利是指利息产生新的利息，长期投资复利效应显著，有助于实现财富积累。',
    category: '理财规划'
  },
  {
    title: '保险在理财中的作用',
    summary: '保险可为家庭和个人提供风险保障。',
    detail: '保险产品能帮助投资者应对意外和疾病等风险，是理财规划的重要组成部分。',
    category: '理财规划'
  }
])

const filteredList = computed(() => {
  if (activeCategory.value === '全部') return knowledgeList.value
  return knowledgeList.value.filter(item => item.category === activeCategory.value)
})

function showDetail(item) {
  Modal.info({
    title: item.title,
    content: `${item.detail}`,
    okText: '知道了',
    centered: true,
    width: 420
  })
}
</script>

<script>
export default {
  name: 'InvestmentKnowledge'
}
</script>

<style scoped>
.category-bar {
  margin-bottom: 24px;
  text-align: left;
}
.knowledge-page {
  max-width: 1100px;
  margin: 80px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.knowledge-card {
  width: 100%;
  min-height: 90px;
  background: #f7faff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(24,144,255,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 16px;
}
.knowledge-item {
  cursor: pointer;
  margin-bottom: 32px;
  transition: box-shadow 0.2s, border-color 0.2s;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 2px 8px #e6f7ff;
}
.knowledge-item:hover {
  box-shadow: 0 6px 24px #bae7ff;
  border-color: #1890ff;
}
.item-card {
  border-radius: 18px;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.item-icon {
  font-size: 1.5rem;
  color: #1890ff;
  background: #e6f7ff;
  border-radius: 50%;
  padding: 6px;
}
.item-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: #1890ff;
}
.item-summary {
  font-size: 1rem;
  color: #555;
  margin-left: 4px;
}
@media (max-width: 900px) {
  .knowledge-page {
    max-width: 98vw;
    margin: 24px auto;
  }
  .knowledge-card {
    min-width: 0;
    padding: 0 4px 12px 4px;
  }
  .item-title {
    font-size: 1rem;
  }
  .item-summary {
    font-size: 0.95rem;
  }
}
</style>
